<template>
  <div class="private-box">
    <div class="private-box-left bdradius4" ref="privateboxleft">
      <!-- <div :class="leftkey == 1 ? 'private-box-left-yes' : ''" @click="leftclick(1)">订单退款</div>
        <div :class="leftkey == 2 ? 'private-box-left-yes' : ''" @click="leftclick(2)">增员减员</div>
        <div :class="leftkey == 3 ? 'private-box-left-yes' : ''" @click="leftclick(3)">享受政策</div> -->
      <div
        v-for="(item, index) in leftdata"
        :class="leftkey == item.id ? 'private-box-left-yes' : ''"
        @click="leftclick(item)"
      >
        {{ item.processName }}
      </div>
    </div>
    <div class="private-box-right">
      <div class="private-box-right-top bdradius4" :style="{ height: Height + 'px' }">
        <div
          v-for="(item, index) in contentdata"
          :key="index"
          @click="setshenpi(item)"
        >
          <div
            class="private-box-right-top-box"
            :style="{ background: item.color ? '#1577FE' : '',cursor:index == 0 || (index + 1 == contentdata.length) ? 'auto' : 'pointer'}"
          >
            <span class="private-box-right-top-box-span">{{
              item.nodeName
            }}</span>
            <div class="private-box-right-top-box-div">
              <div>
                {{
                  index == 0
                    ? "所有人"
                    : index + 1 == contentdata.length
                    ? "审批结束"
                    : item.rolesNameList[0] || "暂无"
                }}
              </div>
              <img src="../../../assets/img/arrow-right.png" alt="" v-if="index == 0 || (index + 1 == contentdata.length) ? false : true"/>
            </div>
          </div>
          <div class="gang" v-if="index + 1 != contentdata.length"></div>
        </div>
      </div>
      <!-- <div class="private-box-right-bot" v-if="buttonRight.find(item => item.name == 'baocun')">
        <div>保存</div>
      </div> -->
    </div>
    <base-drawers
      v-model="drawerkey"
      title="审批设置"
      @input="onclose"
      :loading="drawerLoading"
      @drawerSubmit="setsub"
    >
      <div class="drawer">
        <div class="drawer-title">审批人</div>
        <div class="drawer-inpt">
          <div class="drawer-inpt-left"><span>*</span>选择角色</div>
          <Select v-model="jiaosemodel" style="width: 250px" clearable>
            <Option
              v-for="item in jiaosecityList"
              :value="item.value"
              :key="item.value"
              @on-change="onchange"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
        <!-- <div class="drawer-inpt">
          <div class="drawer-inpt-left"><span style="color:#fff">*</span>选择人员</div>
          <Select v-model="renyuanmodel" multiple style="width: 250px">
            <Option
              v-for="item in renyuancityList"
              :value="item.value"
              :key="item.value"
              @on-change="onchange"
              >{{ item.label }}</Option
            >
          </Select>
        </div> -->
      </div>
    </base-drawers>
  </div>
</template>

<script>
import BaseDrawers from "_c/base-drawers/base-drawers";
export default {
  components: {
    BaseDrawers
  },
  data() {
    return {
      thisdata: "",
      buttonRight: [],
      jiaosecityList: [],
      jiaosemodel: "",
      renyuancityList: [
        {
          value: "New York",
          label: "New York",
        },
        {
          value: "London",
          label: "London",
        },
      ],
      renyuanmodel: "",
      drawerkey: false,
      drawerLoading: false,
      contentdata: [],
      rigdataid: "",
      leftdata: [],
      leftkey: 1,
      Height: "",
    };
  },
  created() {
    let buttonMenu = this.buttonMenu(this.$route.name);
    this.buttonRight = buttonMenu.buttonRight;

    // 获取 DOM 元素
    this.$nextTick(() => {
      let $ele = this.$refs.privateboxleft;
      let height = window.getComputedStyle($ele).height;
      this.Height = height.replace("px", "");
    });
    this.getleftdata();
  },
  methods: {
    // 设置弹框保存按钮
    setsub() {
      if (this.jiaosemodel === "") {
        this.$Message.warning("请选择角色");
        return false;
      }
      this.drawerLoading = true;
      var datas = {
        definitionId: this.leftkey,
        definitionIdCode:
          this.leftkey == 1
            ? "zengyuan_shenhe"
            : this.leftkey == 2
            ? "jianyuan_shenhe"
            : this.leftkey == 3
            ? "tuikuan_shenhe"
            : "xiangshouzhengce_shenhe",
        nodeId: this.thisdata.id,
        roleIds: [this.jiaosemodel],
      };
      this.APIS.auditroles(datas).then((res) => {
        this.drawerLoading = false;
        if (res.code == 20000) {
          this.$Message.success("设置成功");
          this.jiaosemodel = "";
          this.thisdata = "";
          this.drawerkey = false;
          this.getrigdata()
        }
      });
    },
    // 关闭抽屉触发
    onclose() {
      this.drawerkey = false;
      this.drawerLoading = false;
      this.jiaosemodel = "";
      this.thisdata.color = false
      this.thisdata = "";
    },
    // 获取角色列表
    jiaoselist(e) {
      this.APIS.roleslist().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          if(e.rolesNameList[0] == res.data[i].roleName){
            this.jiaosemodel = res.data[i].id
          }
          res.data[i].value = res.data[i].id;
          res.data[i].label = res.data[i].roleName;
        }
        this.jiaosecityList = res.data;
      });
    },
    // change事件
    onchange(e) {
      console.log(e);
      console.log(this.model);
    },
    // 点击中间的审核
    setshenpi(e) {
      if (e.nodeName == "开始" || e.nodeName == "结束") {
      } else {
        e.color = true;
        this.jiaoselist(e);
        this.jiaosemodel = "";
        this.thisdata = e;
        this.drawerkey = true;
      }
    },
    // 左侧切换
    leftclick(e) {
      this.leftkey = e.id;
      this.rigdataid = e.id;
      this.getrigdata();
    },
    // 左侧数据
    getleftdata() {
      this.APIS.processlist().then((res) => {
        this.leftdata = res.data;
        this.rigdataid = res.data[0].id;
        this.getrigdata();
      });
    },
    // 主体数据
    getrigdata() {
      this.APIS.nodelist({ id: this.rigdataid }).then((res) => {
        this.contentdata = res.data;
      });
    },
  },
};
</script>

<style scoped lang="less">
/deep/.ivu-select-selected-value{
  font-size: 14px !important;
}
/deep/.ivu-select-placeholder{
  font-size: 14px !important;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
/deep/.ivu-select-selection {
  height: 24px !important;
  line-height: 24px !important;
}
.drawer {
  margin: 0 30px;
  .drawer-title {
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    margin: 0 0 20px 0;
  }
  .drawer-inpt {
    color: #333333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .drawer-inpt-left {
      margin-right: 16px;
      span {
        color: red;
      }
    }
  }
}
.gang {
  width: 4px;
  height: 120px;
  margin: 0 auto;
  background: #9ea8be;
}
.private-box {
  height: 100%;
  width: 100%;
  display: flex;
  .private-box-left {
    width: 96px;
    margin-right: 12px;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    div {
      cursor: pointer;
      margin-top: 12px;
      color: #333333;
    }
    .private-box-left-yes {
      color: #1577fe;
      font-weight: 600;
      font-family: PingFangSC-Semibold, PingFang SC;
    }
  }
  .private-box-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .private-box-right-top {
      padding: 30px 0;
      overflow: auto;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      .private-box-right-top-box {
        width: 320px;
        height: 100px;
        background: #9ea8be;
        border-radius: 8px;
        padding: 10px;
        .private-box-right-top-box-span {
          margin-bottom: 10px;
          display: inline-block;
          color: #ffffff;
        }
        .private-box-right-top-box-div {
          height: 48px;
          background: #fff;
          border-radius: 4px;
          display: flex;
          align-items: center;
          padding: 13px 10px;
          div {
            font-size: 15px;
            color: #333333;
            width: 95%;
          }
          img {
            width: 17px;
            height: 20px;
          }
        }
      }
    }
    .private-box-right-bot {
      height: 64px;
      margin-top: 12px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      div {
        cursor: pointer;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 65px;
        height: 32px;
        background: #1577fe;
        border-radius: 2px;
      }
    }
  }
}
</style>
